<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Toolbars</title>
  <meta name="description" content="Contains actions, indicators, and navigation associated with the current view">
  <!--
    - This <style> and <link> is only used for the example preview,
    - they are not required for the real use case.
    -->
  <link rel="stylesheet" href="../toolbars.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    body {
     background: none;
    }

    /* Base icons */
    [role="toolbar"] .pack-icon-mark {
      background-image: url();
    }

    [role="toolbar"] .pack-icon-share {
      background-image: url();
    }

    [role="toolbar"] .pack-icon-send {
      background-image: url();

    }

    [role="toolbar"] .pack-icon-move {
      background-image: url();
    }

    [role="toolbar"] .pack-icon-delete {
      background-image: url();
    }

  </style>
</head>

<body role="application">
  <div role="toolbar">
    <ul>
      <li><button class="pack-icon-delete">Delete</button></li>
    </ul>
    <ul>
      <li><button class="pack-icon-mark">Mark</button></li>
      <li><button class="pack-icon-send">Send</button></li>
      <li><button class="pack-icon-move">Move</button></li>
      <li><button class="pack-icon-share">Share</button></li>
    </ul>
  </div>
</body>
</html>
